import React, { memo, useEffect, useRef, useState } from 'react'
import { Carousel, Image } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons'

// 导入 关于图片的 常量
import { PlaceholderImg, ImgError } from '../../../../../constant/local-constant'
// 引入自己的方法
import { getTuijianGedan, getCategoryContent } from '../../../../../api/gedanApi'
import { getCount } from '../../../../../utils/format'
import { GedantuijianBox } from './style'


export default memo(function Gedantuijian() {
  // state
  const nav = ["为你推荐", "华语", "流行", "摇滚", "民谣",]
  const [index, setIndex] = useState(0) // xx变色 的索引
  const [list, setList] = useState([])
  const CarouselRef = useRef()
  // redux hooks

  // other hooks
  useEffect(() => {
    getTuijianGedanApi()
  }, [])
  useEffect(() => {
    if (index === 0) {
      getTuijianGedanApi()
    } else {

      getCategoryContentApi(nav[index])
    }

  }, [index])
  // other handle
  const navClick = (item, i) => {
    setIndex(i)
  }

  // 获取推荐
  // 获取 推荐歌单
  const getTuijianGedanApi = () => {
    getTuijianGedan().then(res => {
      setList(res.result)
      CarouselRef.current.goTo(0, false)
    })
  }
  // 获取 其他类的歌单
  const getCategoryContentApi = (cat) => {
    getCategoryContent(cat).then(res => {
      setList(res.result || res.playlists)
      CarouselRef.current.goTo(0, false)
    })
  }
  return (

    <GedantuijianBox>
      <div className="wrap">
        <div className="title">
          <h2>歌单推荐</h2>
        </div>
        <div className="fenlei">
          {
            nav.map((item, i) => {
              return (
                <span
                  className={index === i ? "active" : ''}
                  onClick={e => navClick(item, i)}
                  key={i}
                >{item}</span>
              )
            })
          }
        </div>
        <Carousel
          autoplay={true}
          ref={CarouselRef}
        >
          {
            list.map((item, index) => {
              if (index % 5 === 0) {
                return (
                  <div className="banner_main" key={index}>
                    {
                      list.slice(index, index + 5).map((itemm, indexx) => {
                        return (
                          <div key={indexx}>
                            <div className="img_info">
                              {/* <img src={itemm.picUrl || itemm.coverImgUrl} alt="" /> */}
                              <Image
                                width={224}
                                height={224}
                                src={itemm.picUrl || itemm.coverImgUrl}
                                preview={false}
                                fallback={ImgError}
                                placeholder={
                                  <Image
                                    preview={false}
                                    width={224}
                                    height={224}
                                    src={PlaceholderImg}
                                  />
                                }
                              />
                              <i className="img_info_mask"></i>
                              <i className="img_info_play"></i>
                            </div>
                            <div className="one-txt-cut name">{itemm.name}</div>
                            <i className="playcount">播放量:&nbsp;{getCount(itemm.playCount)}</i>
                          </div>
                        )
                      })
                    }
                  </div>
                )
              }
            })
          }
        </Carousel>
        <i className="pre toggle" onClick={e => { CarouselRef.current.prev() }}>
          <LeftOutlined />
        </i>
        <i className="next toggle" onClick={e => { CarouselRef.current.next() }}>
          <RightOutlined />
        </i>
      </div>

    </GedantuijianBox>
  )
})


